<template>
  <div>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问题反馈</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div style="margin-top: 20px">
    <el-tabs v-model="index" @tab-click="handleClick">
      <el-tab-pane label="问题反馈" name="0"></el-tab-pane>
      <el-tab-pane label="我的反馈" name="1"></el-tab-pane>
    </el-tabs>
  </div>

    <div v-if="index === '0'" class="container">
      <el-form ref="form"  :rules="rules" :model="form" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="问题类型" prop="type">
              <el-select style="width: 100%" v-model="form.type"  placeholder="选择">
                <el-option label="bug反馈" value="0"></el-option>
                <el-option label="优化建议" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="问题描述" prop="content">
              <el-input
                v-model="form.content"
                placeholder="请输入你遇到的问题"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-button style="width: 200px; margin-left: 200px"   type="primary" @click="submitForm">提交反馈</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div v-if="index === '1'" class="container">
      <div class="card" v-if="this.problemList.length === 0">
        暂无数据
      </div>
      <div class="card" v-if="this.problemList.length > 0">
        <el-row :gutter="50">
          <el-col :span="12"  v-for="(item,index) in problemList"  >
            <div class="card-body" >
              <ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
                <li class="media">
                  <div class="media-body">
                    <div class="media-title <!--node-status node-is-offline-->">
                      反馈类型：
                        <el-tag v-if="item.type == '0'" type="success">bug反馈</el-tag>
                        <el-tag v-if="item.type == '1'" type="danger">优化建议</el-tag>
                    </div>
                    <div class="media-title <!--node-status node-is-offline-->">反馈内容：{{item.content}}</div>
                    <div class="media-title <!--node-status node-is-offline-->">是否处理：{{item.flag ==='0'?'未处理':'已处理'}}</div>
                    <div class="media-title <!--node-status node-is-offline-->">反馈时间：{{item.createTime}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </el-col>

        </el-row>
        <div style="    text-align: center;">
          <el-pagination
            @size-change="getList"
            @current-change="getList"
            :current-page.sync="queryParams.pageNum"
            :page-sizes="[1, 5, 10]"
            :page-size.sync="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { submitProblem, allProblemList } from '@/api/problem'

export default {
  name: 'problem',
  data () { // 选项 / 数据
    return {
      form:{

      },
      index:'0',
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      rules: {
        type: [
          {
            required: true,
            trigger: 'blur',
            message: '类型不能为空',
          }
        ],
        content: [
          {
            required: true,
            message: '问题描述不能为空',
            trigger: 'blur'
          },
        ]
      },
      problemList:[],
      total:undefined
    }
  },
  methods: {
    routeChange: function () { // 展示页面信息
      const that = this
      if (this.index === '0') {

      }
      if (this.index === '1') {
        that.getList()
      }
    },
    getList: function () {
      const that = this;
      allProblemList(that.queryParams).then((response) => {
        that.problemList = response.list
        that.total = response.total
      }).catch(() => { })
    },
    handleClick (tab, event) {
      this.routeChange()
    },
    submitForm: function () {
      let that = this;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          submitProblem(this.form).then((response) => {
              that.$message.success('提交成功！');
              this.form.type = undefined;
              this.form.content = undefined;
            })
        }
      })
    },
  },
  created () {
    this.routeChange()
  }
}
</script>

<style scoped>

.card-body .rounded-circle {
  margin-bottom: 15px;
  box-shadow: 0 2px 6px #e6ecf1;
}
.card {
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;

  border-radius: 0.25rem;
}

.card-body {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  padding: 20px 25px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
  margin-bottom: 15px;
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media .media-title {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 15px;
  color: #34395e;
}
.media-body {
  -ms-flex: 1;
  flex: 1;
}

.media .media-items .media-item {
  flex: 1;
  text-align: center;
  padding: 0 15px;
}

.media .media-items .media-item .media-label {
  font-weight: 600;
  font-size: 12px;
  color: #34395e;
  letter-spacing: .5px;
}

/deep/ .el-rate__icon {
  font-size: 30px;
}
</style>
